<!--
 * @Descripttion : 首页
 * @version      : 
 * @Author       : min
 * @Date         : 2025-02-26 16:19:51
 * @LastEditors  : min
 * @LastEditTime : 2025-02-26 17:31:17
-->
<html>

<head>
  <title>示波器</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/body.css">
</head>

<body>
  <header class="ml_header">
    <div class="ml_buttons">
      <a href="#" class="ml_button_item">设置</a>
      <!-- 下拉框 -->
      <div id="settings-dropdown" class="dropdown-menu">
        <ul>
          <li><a href="#">查询</a></li>
          <li><a href="#">修改</a></li>
          <li><a href="#">修改值</a></li>
        </ul>
      </div>
      <a href="#" class="ml_button_item">固件升级</a>
      <a href="#" class="ml_button_item">启动</a>
      <a href="#" class="ml_button_item">停止</a>
      <a href="#" class="ml_button_item">从文件加载数据</a>
      <a href="#" class="ml_button_item">帮助</a>
      <a href="#" class="ml_button_item">日志</a>
    </div>
  </header>
  <main class="ml_body">
    <!-- 左边黑色图形 -->
    <div class="ml_body_screen" id="ml_body_screen">
      <div id="browseFiles"></div>
      <div class="canvas-container">
        <canvas id="gridCanvas"></canvas>
        <canvas id="waveformCanvas"></canvas>
      </div>
      <div class="my_channel_list" id="channelList"> </div>
    </div>
    <!-- 右边控制部分 -->
    <div class="ml_handle">
      <!-- 上半部分的设置 -->
      <div id="ml_handle_top">
        <!-- 时间控制和通道选取 -->
        <fieldset class="ml_box">
          <legend>时间控制和通道选取</legend>

          <!--  -->
          <div class="ml_us">
            <input class="ml_us_range" type="range" id="ml_us_range" name="vol" min="0" max="50">
            <input class="ml_us_input" type="text" id="ml_us_input" value="50us">
          </div>

          <!--  -->
          <div class="ml_ch_list">
            <label for="ch1"><input type="checkbox" id="ch1" value="CH1">CH1</label>
            <label for="ch2"><input type="checkbox" id="ch2" value="CH2">CH2</label>
            <label for="ch3"><input type="checkbox" id="ch3" value="CH3">CH3</label>
            <label for="ch4"><input type="checkbox" id="ch4" value="CH4">CH4</label>
            <label for="ch5"><input type="checkbox" id="ch5" value="CH5">CH5</label>
            <label for="ch6"><input type="checkbox" id="ch6" value="CH6">CH6</label>
          </div>

          <!--  -->
          <div class="ml_change_us">
            <button class="ml_change_us_title">移动至</button>
            <div class="ml_change_us_input">
              <input type="number" class="ml_change_us_input_number" id="ml_us_number">
            </div>
            <div class="ml_change_us_select">
              <select name="us" id="ml_us_select">
                <option value="1">us</option>
                <option value="2">ms</option>
                <option value="3">s</option>
              </select>
            </div>
          </div>
        </fieldset>


        <!-- 控制和测量选取 -->
        <fieldset class="ml_box">
          <legend>控制和测量选择</legend>
          <div class="ml_ch_list">
            <label for="ch1_r"><input type="radio" id="ch1_r" value="CH1" name="radioCH">CH1</label>
            <label for="ch2_r"><input type="radio" id="ch2_r" value="CH2" name="radioCH">CH2</label>
            <label for="ch3_r"><input type="radio" id="ch3_r" value="CH3" name="radioCH">CH3</label>
            <label for="ch4_r"><input type="radio" id="ch4_r" value="CH4" name="radioCH">CH4</label>
            <label for="ch5_r"><input type="radio" id="ch5_r" value="CH5" name="radioCH">CH5</label>
            <label for="ch6_r"><input type="radio" id="ch6_r" value="CH6" name="radioCH">CH6</label>
          </div>

          <div class="ml_direction_list">
            <label for="direction1"><input type="checkbox" id="direction1" value="1">横向移动锁定</label>
            <label for="direction2"><input type="checkbox" id="direction2" value="2">纵向移动锁定</label>
            <label for="direction3"><input type="checkbox" id="direction3" value="3">Cursors使能</label>
          </div>

          <div class="ml_direction_list">
            <label>
              X移动
              <select name="x" id="xAxis">
                <option value="0">None</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </label>
            <label>
              Y移动
              <select name="y" id="yAxis">
                <option value="0">None</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </label>
          </div>

        </fieldset>
      </div>
      <!-- 下半部分的通道颜色选择 -->
      <div class="ml_chancel_container" id="ml_chancel_container">
        <template id="ml_chancel_temp">

          <!-- item背景 -->
          <div class="ml_chancel_item">

            <!-- 左边 -->
            <div class="ml_chancel_item_left">
              <!-- 左上背景 -->
              <div class="ml_chancel_item_left_top">
                <!-- 通道序号 -->
                <label class="ml_chancel_item_index">1</label>
                <!-- electron 颜色选择器 -->
                <input type="color" id="colorPicker" name="color" value="#ff0000">
                <!-- 通道颜色 -->
                <div class="ml_chancel_item_left_title">通道1</div>
              </div>
              <!-- 左下背景 -->
              <div class="ml_input_range">
                <!-- 左下 滑动条 -->
                <input type="range" value="0">
              </div>
            </div>

            <!-- 右边 -->
            <div class="ml_chancel_item_right">
              <!--  右边上半背景-->
              <div class="ml_chancel_item_right_color">
                <!-- 按钮 -->
                <button>FFFF</button>
                <!-- 自定义一个弹窗 -->
                <!-- <dialog id="my-dialog">
                  <h2>This is a Dialog</h2>
                  <p>You can customize this content as needed.</p>
                  <button id="close-dialog-button">Close</button>
                </dialog> -->
                <!-- 下滑选择器 -->
                <select name="">
                  <option value="0">1</option>
                  <option value="1">2</option>
                  <option value="2">3</option>
                  <option value="3">4</option>
                </select>
              </div>

              <div><input class="ml_chancel_item_right_input" type="number" name="" id="" value="1"></div>
              <div><input class="ml_chancel_item_right_input" type="number" name="" id="" value="0"></div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </main>
  <footer class="ml_footer"></footer>


  <script type="module" src="../js/common.js"></script>
  <script type="module" src="../js/body.js"></script>
  <script type="module" src="../js/char3.js"></script>
  <script type="text/javascript" src="../js/header.js"></script>
  <script type="module" src="../js/util/extensions.js"></script>

</body>

</html>